<template>
  <div class="course-create">
    <div class="page-header">
      <h2>创建新课程</h2>
      <a-button @click="goBack">返回</a-button>
    </div>

    <a-card>
      <a-form
        :model="form"
        :rules="rules"
        @finish="handleSubmit"
        layout="vertical"
      >
        <a-row :gutter="24">
          <a-col :span="16">
            <a-form-item label="课程名称" name="title">
              <a-input
                v-model:value="form.title"
                placeholder="请输入课程名称"
                size="large"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="课程分类" name="category">
              <a-select
                v-model:value="form.category"
                placeholder="请选择分类"
                size="large"
              >
                <a-select-option value="ai">AI技术</a-select-option>
                <a-select-option value="programming">编程开发</a-select-option>
                <a-select-option value="design">设计创意</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="课程简介" name="description">
          <a-textarea
            v-model:value="form.description"
            placeholder="请输入课程简介"
            :rows="4"
          />
        </a-form-item>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="课程价格" name="price">
              <a-input-number
                v-model:value="form.price"
                placeholder="请输入价格"
                :min="0"
                :precision="2"
                style="width: 100%"
                size="large"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="课程状态" name="status">
              <a-select
                v-model:value="form.status"
                placeholder="请选择状态"
                size="large"
              >
                <a-select-option value="draft">草稿</a-select-option>
                <a-select-option value="published">发布</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="课程封面" name="cover">
          <a-upload
            v-model:file-list="fileList"
            list-type="picture-card"
            :show-upload-list="false"
            :before-upload="beforeUpload"
            @change="handleChange"
          >
            <div v-if="imageUrl">
              <img :src="imageUrl" alt="avatar" style="width: 100%" />
            </div>
            <div v-else>
              <PlusOutlined />
              <div style="margin-top: 8px">上传封面</div>
            </div>
          </a-upload>
        </a-form-item>

        <a-form-item label="课程详情" name="content">
          <a-textarea
            v-model:value="form.content"
            placeholder="请输入课程详细内容"
            :rows="8"
          />
        </a-form-item>

        <a-form-item>
          <a-space>
            <a-button type="primary" html-type="submit" :loading="loading">
              保存课程
            </a-button>
            <a-button @click="saveAsDraft">保存为草稿</a-button>
            <a-button @click="goBack">取消</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { PlusOutlined } from '@ant-design/icons-vue'

const router = useRouter()
const loading = ref(false)
const imageUrl = ref('')
const fileList = ref<any[]>([])

// 表单数据
const form = reactive({
  title: '',
  category: '',
  description: '',
  price: 0,
  status: 'draft',
  content: ''
})

// 表单验证规则
const rules = {
  title: [
    { required: true, message: '请输入课程名称', trigger: 'blur' }
  ],
  category: [
    { required: true, message: '请选择课程分类', trigger: 'change' }
  ],
  description: [
    { required: true, message: '请输入课程简介', trigger: 'blur' }
  ],
  price: [
    { required: true, message: '请输入课程价格', trigger: 'blur' }
  ]
}

// 上传前检查
const beforeUpload = (file: File) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
  if (!isJpgOrPng) {
    message.error('只能上传 JPG/PNG 格式的图片!')
  }
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    message.error('图片大小不能超过 2MB!')
  }
  return isJpgOrPng && isLt2M
}

// 处理上传变化
const handleChange = (info: any) => {
  if (info.file.status === 'uploading') {
    return
  }
  if (info.file.status === 'done') {
    // 这里应该调用上传API，现在模拟一下
    imageUrl.value = URL.createObjectURL(info.file.originFileObj)
  }
}

// 提交表单
const handleSubmit = async (values: any) => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    message.success('课程创建成功！')
    router.push('/merchant/course/list')
  } catch (error) {
    message.error('创建失败，请重试')
  } finally {
    loading.value = false
  }
}

// 保存为草稿
const saveAsDraft = () => {
  form.status = 'draft'
  handleSubmit(form)
}

// 返回
const goBack = () => {
  router.back()
}
</script>

<style scoped>
.course-create {
  padding: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0;
  color: #333;
}

:deep(.ant-upload-select-picture-card) {
  width: 128px;
  height: 128px;
}
</style>
